<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <link rel="icon" href="./image/bicon.png">
    <link rel="stylesheet" href="./css/reset2.css">

    <style>
        .box
        {
           width: 280px;
           height: 240px;
           box-sizing: border-box;
           background-color: #fff;
           text-align: center;
           padding-top: 5px;
        }


        .Luimage
        {
            width: 250px;
            height: 150px;
            
        }

        .text
        {
            text-align: left;
            width: 235px;
            font-size: 15px;
            
        }

        .author-info
        {
            font-size: 13px;
            text-align: left;
            width: 240px;
            color: #999;
            display: inline-block;
        }

        .author-info::before
        {
            content:"";
            display: inline-block;
            background: url(./image/bili.svg);
            background-size: cover;
            width: 16px;
            height: 16px;
            margin-right: 3px;
            vertical-align: text-bottom;
        }

        .Luimage:hover,.author-info:hover,.text:hover
        {
            color: blue;
        }

        .text{
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div class="box">
       <a class="image-a" href="#" target="_blank">
        <img class="Luimage" src="./image/luhan.jpg" alt="">
       </a>
        
       <a class="text1-a" href="#" target="_blank">
         <p class="text">
            抽象与烂片の顶点！爆笑吐槽《749局》，看完人笑傻了哈哈哈哈
         </p>
       </a>
       
       <a class="author" href="#" target="_blank">
        <p class="author-info">文西与阿漆· 12-10</p>
       </a>

    </div>
</body>

</html>